<template>
  <div id="app">
  

    <div class="box">
      <div class="box1" ref="boxs"></div>
      <el-tabs   :stretch='true'  v-model="activeName" @tab-click="oc">
    <el-tab-pane label="登录" name="first">
      <el-form :model="from" :rules="rules" class="fro" ref="refg">
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入内容"
            prefix-icon="iconfont icon-kejituandui"
            v-model.number="from.phone"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            placeholder="请输入内容"
            prefix-icon="iconfont icon-gouwuche"
            v-model="from.password"
            show-password
           
          >
          </el-input>
        </el-form-item>
        <el-form-item class="rr">
          <el-button type="primary" round @click="deref">登录</el-button>
          <el-button type="primary" round @click="refget">重置</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <!-- 祖册 -->
    <el-tab-pane label="注册" name="second">
      <Post></Post>
    </el-tab-pane>
    
  </el-tabs>
      
    </div>
  </div>
</template>

<script>
import Post from '@/components/post.vue'
export default {

 


  name:'Login',
  data() {
    return {
      activeName:'first',
      from: {
        phone:17818773837,
        password:"lccl520520520"
      },
      
// 验证规则
      rules: {
        phone: [
          { required: true, message: '年龄不能为空'},
       { type: 'number', message: '年龄必须为数字值'}
        ],
        password: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 3, max: 16, message: "长度在 3 到 16 个字符", trigger: "blur" },
        ],
      },
    };
  },
  components:{
  Post
  },

  created() {},

  methods: {
    oc(tab){
      if (tab.index==='1') {
       
        this.$refs.boxs.style.display="none"
      }else{
     
        this.$refs.boxs.style.display="block"
      }
      
    },
    // 调用方法进行重置
    refget() {
      this.$refs.refg.resetFields();
    },
    // 调用方法对登录进行验证
    deref() {
      this.$refs.refg.validate(async (valid) => {
        // valid表示布尔
        // console.log(valid);
      //  如果表单验证失败则停止运行
        if (!valid) return;
        
// 发起axios登录
this.$http.get("/api/login/cellphone",{params:this.from}).then((res)=>{
  
  this.$store.commit('getid',res.data.account.id)

if (res.status!==200) {
  
     this.$message.error('用户错了哦，');
}else{
  
  this.$message.success('恭喜你，登录成功');
  

// 导航跳转
this.$router.push("/music")

}
})







        
        
      });
    },
  },
};
</script>
<style lang="less" scoped>

.box {
  position: absolute;
  max-width: 1320px;
  min-width: 430px;
  min-height: 550px;
  border: 2px solid;
  top: 50%;
  left: 50%;
 transform: translate(-50%, -50%);
  border-radius: 10%;
   background: -webkit-linear-gradient(red, blue);
}
.box1{
 
  position: absolute;
  top: 96px;
  left: 150px;
  border-radius: 20px;
  width: 130px;
  height: 120px;
 background:url(../assets/wyy.jpg) center no-repeat;
background-size: 130px 120px;
border: 3px solid rgb(17, 226, 80);
  
}
.rr {
  display: flex;
  justify-content: flex-end;
}
.fro {
  margin-top: 260px;
  padding: 20px;
}
/deep/.el-input__inner{
  border-radius: 20px;
  
  outline: none;
}
/deep/.el-tabs__item{
  font-weight: 900;
  font-size: 18px;
}
</style>
